import React from 'react';
import { DownOutlined, UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space, Typography, Avatar } from 'antd';
import store from 'store'
import { useAppDispatch } from '@/store/hooks/index'
import { useNavigate } from 'react-router-dom'
// 导入修改rtk 仓库中的数据的方法
import {
    setAdminname,
    setCheckedkeys,
    setRole,
    setToken
} from '@/store/slices/userSlice';
const items: MenuProps['items'] = [
    {
        key: '/login',
        label: '退出登录',
    },
    {
        key: '/setting',
        label: '系统设置',
    },
    {
        key: '*',
        label: '其他',
    },
];



const App: React.FC = () => {
    const dispatch = useAppDispatch();
    const navigate = useNavigate()
    //点击下拉菜单执行的操作
    const onClick: MenuProps['onClick'] = ({ key }) => {
        console.log(key);
        // 当点击退出登录时,
        if (key == '/login') {
            // 01: 清除本地登录时做的操作(redux 存内容, 和在本地存了用户信息了)
            // store.clearAll()
            store.remove('userinfo')
            //02: rtk 清除
            dispatch(setAdminname(''));
            dispatch(setCheckedkeys([]));
            dispatch(setRole(0));
            dispatch(setToken(''))
            // 03:跳转到登录页
            navigate('/login')
        }
        // 当点击设置时, 该...
        if (key == '/setting') {
            navigate('/setting')
        }

    };


    return (<Dropdown
        menu={{
            items,
            selectable: true,
            defaultSelectedKeys: ['/login'],
            onClick
        }}
    >
        <Typography.Link>
            <Space>
                {/* 头像 */}
                <Avatar size={35} src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                {/* <DownOutlined /> */}
            </Space>
        </Typography.Link>
    </Dropdown>
    )
};

export default App;